import type { VbenFormProps, VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { computed, ref } from 'vue';
import { queryPage, typeList } from './api';
import { z } from '#/adapter/form';
import { handleRangeTimes } from '#/utils/tools';

// 主键字段定义
export const idKey = ref('msgId');
export const handleId = ref('');
export const newTypes = ref<any[]>([]);

// 表格表单数据
export const formOptions: VbenFormProps = {
  showCollapseButton: false,
  schema: [
    {
      component: 'Input',
      defaultValue: undefined,
      fieldName: 'msgTitle',
      componentProps: {
        placeholder: '请输入新闻标题',
        allowClear: true,
      },
      label: '新闻标题',
    },
    {
      component: 'Select',
      defaultValue: undefined,
      fieldName: 'msgTypeId',
      componentProps: {
        allowClear: true,
        options: computed(() => newTypes.value),
        placeholder: '请选择新闻分类',
      },
      label: '新闻分类',
    },
    {
      component: 'Input',
      defaultValue: undefined,
      componentProps: {
        placeholder: '请输入来源',
        allowClear: true,
      },
      fieldName: 'msgSource',
      label: '来源',
    },
    {
      component: 'Input',
      defaultValue: undefined,
      componentProps: {
        placeholder: '请输入发布人',
        allowClear: true,
      },
      fieldName: 'sendUser',
      label: '发布人',
    },
    {
      component: 'RangePicker',
      fieldName: 'RangeTimes',
      label: '时间范围',
      componentProps: {
        allowClear: true,
        format: 'YYYY/MM/DD',
      },
    },
  ],
  wrapperClass: 'grid-cols-5',
};

// 表格数据
export const gridOptions: VxeTableGridOptions = {
  rowConfig: {
    height: 80,
  },
  columns: [
    { title: '序号', type: 'seq', width: 80 },
    {
      title: '新闻主图',
      field: 'msgImage',
      align: 'center',
      cellRender: {
        name: 'CellImageViewer',
        props: { width: '100px', height: '60px' },
      },
      width: 160,
    },
    { title: '新闻标题', field: 'msgTitle', align: 'left' },
    {
      title: '新闻分类',
      field: 'msgTypeId',
      cellRender: {
        name: 'CellDict',
        props: {
          dictData: computed(() => newTypes.value),
        },
      },
      width: 140,
    },
    { title: '来源', field: 'msgSource', width: 200 },
    { title: '发布人', field: 'sendUser', width: 200 },
    { title: '发布时间', field: 'createTime', width: 180 },
    {
      fixed: 'right',
      slots: { default: 'action' },
      title: '操作',
      width: 160,
    },
  ],
  minHeight: '100%',
  maxHeight: '100%',
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        formValues = handleRangeTimes(formValues);
        let params = {
          page: page.currentPage,
          limit: page.pageSize,
          handlerName: 'baseNewsListHandler',
          ...formValues,
        };
        return await queryPage(params);
      },
    },
  },
  pagerConfig: {
    enabled: true,
    pageSize: 8,
  },
  toolbarConfig: {
    custom: true,
    export: false,
    import: false,
    refresh: true,
    zoom: true,
  },
};

// 编辑弹窗表单配置
export const drawerFormSchema: VbenFormSchema[] = [
  {
    component: 'Input',
    defaultValue: '',
    fieldName: idKey.value,
    label: '新闻id',
    dependencies: {
      show() {
        return false;
      },
      triggerFields: [''],
    },
  },
  // {
  //   component: 'ApiSelect',
  //   fieldName: 'msgTypeId',
  //   componentProps: {
  //     api: typeList,
  //     allowClear: true,
  //     class: 'w-2/3',
  //     labelField: 'typeName',
  //     valueField: 'msgTypeId',
  //     placeholder: '请选择',
  //   },
  //   label: '新闻分类',
  //   rules: 'required',
  // },
  {
    component: 'Select',
    fieldName: 'msgTypeId',
    componentProps: {
      allowClear: true,
      class: 'w-1/3',
      options: computed(() => newTypes.value),
      placeholder: '请选择新闻分类',
    },
    label: '新闻分类',
    rules: 'required',
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入标题',
      allowClear: true,
    },
    fieldName: 'msgTitle',
    label: '标题',
    rules: 'required',
  },
  {
    component: 'ImageUpload',
    fieldName: 'msgImage',
    // help: '图片建议长宽比5:3',
    description: '图片建议长宽比5:3',
    label: '图片',
    rules: z.string().min(1, { message: '请上传图片，图片建议长宽比5:3' }),
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入来源',
      allowClear: true,
      class: 'w-1/2',
    },
    fieldName: 'msgSource',
    label: '来源',
    rules: 'required',
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入发布人',
      allowClear: true,
      class: 'w-1/2',
    },
    fieldName: 'sendUser',
    label: '发布人',
    rules: 'required',
  },
  {
    component: 'TinymceEditor',
    fieldName: 'msgContent',
    label: '内容',
    rules: 'required',
  },
];
